<template>
  <div class="weight">
    <van-cell is-link @click="showPopup">
      {{ data }}
    </van-cell>
    <van-popup
      v-model:show="show"
      position="bottom"
      close-icon-position="top-left"
      :style="{ height: '30%' }"
    >
      <van-date-picker
        v-model="currentDate"
        title="选择日期"
        @cancel="cancel"
        @confirm="confirm"
      />
    </van-popup>
    <!-- 体重 -->
    <div class="circle">
      <van-circle
        v-model:current-rate="currentRate"
        :rate="value"
        :speed="100"
        :text="text"
        :stroke-width="80"
        size="120px"
        color="#f6ca2c"
      />
    </div>
    <van-slider
      v-model="value"
      bar-height="10"
      button-size="30"
      active-color="#f6ca2c"
    >
      <template #button>
        <div class="custom-button">
          {{ value }}
        </div>
      </template>
    </van-slider>
    <van-button
      type="primary"
      size="large"
      round
      color="#f6ca2c"
      @click="commit"
    >
      保存
    </van-button>
    <div id="main" style="width: 100%;height: 300px;" />
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'
import * as echarts from 'echarts'

const show = ref(false)
const data = ref('2023-04-20')
const datax = ref('04.20')
// 所有体重数据
const weightData: any = {}
// echarts 实例
let weightChart: any = null

const showPopup = () => {
  show.value = true
}
const currentDate = ref(['2023', '04', '20'])
// datax.value = currentDate.value.slice(1, 3).join('.')
// const datax = computed(() => {
//   console.log('重新计算:', currentDate.value)
//   return currentDate.value.slice(1, 3).join('.')
// })

// 确定选择日期
const confirm = () => {
  // console.log('curr:', currentDate)
  data.value = currentDate.value.join('-')
  datax.value = currentDate.value.slice(1, 3).join('.')
  show.value = false
}

const cancel = () => {
  show.value = false
}

// 体重选择
const currentRate = ref(0)
const text = computed(() => currentRate.value.toFixed(0))
const value = ref(10)
// eslint-disable-next-line no-shadow
// // 点击事件
// const arr:any = []
// 绘制图表
const option = {
  title: {
    text: '体重 单位：斤',
  },
  tooltip: {
    trigger: 'axis',
  },
  legend: {
    data: ['weight'],
  },
  grid: {
    left: '5%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['4.20'],
  },
  yAxis: {
    type: 'value',
  },
  series: {
    name: 'weight',
    type: 'line',
    stack: 'Total',
    data: [2.5],
  },

}
onMounted(() => {
  const dom = document.getElementById('main') as HTMLElement
  // const myChart = echarts.init(dom)
  weightChart = echarts.init(dom)
  weightChart.setOption(option)
})

// 保存
const commit = () => {
  // option.xAxis.data = option.xAxis.data.concat(datax.value)
  // option.series.data = option.series.data.concat(value.value)
  // console.log(datax)
  // arr.map({
  //   x: datax.value,
  //   y: value.value,
  // })
  // console.log('datax.value', datax)
  // console.log('value.value', value.value)
  // 将日期与体重数据保存
  weightData[datax.value] = value.value
  // 键值数组数据
  const keys: any = Object.keys(weightData).sort() // 属性名按升序排序
  const values: any = keys.map((key: any) => weightData[key]) // 属性值对应属性名
  // 配置 echarts 选项
  option.xAxis.data = keys
  option.series.data = values
  // const dom = document.getElementById('main') as HTMLElement
  // const myChart = echarts.init(dom)
  weightChart.setOption(option)
}
</script>

<style lang="less" scoped>
.weight{
    width: 100%;
    height: 667px;
    background: #f7f7f7;
    overflow: hidden;
}
/deep/.van-cell__value{
  text-align: center;
  color: black;
}
.circle{
  width: 100px;
  margin: 0 auto;
  margin-bottom: 30px;
  margin-top: 30px;
}
  .custom-button {
    width: 30px;
    color:#fff;
    font-size: 10px;
    line-height: 18px;
    text-align: center;
    background-color:  #f6ca2c;
    border-radius: 100px;
  }
  .van-button{
    margin-top: 30px;
  }
</style>
